<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-15 flex v-align-c">
      <span></span>
      <i>底部菜单</i>
    </h2>
    <div class="goods-form">      
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">   
        <div class="tips-row mar-b-15">修改底部菜单信息后需要重新发布微信审核通过后才生效</div>
        <template v-if="customPage.bottomNavList">
          <draggable id="content-box flex-item" v-model="customPage.bottomNavList" dragable="true" :move="getdata" @update="datadragEnd">
            <div v-for="(item, index) in customPage.bottomNavList" :key="'btns-list-' + index">
              <div class="mar-l--25 mar-t--28 pad-b-15">
                  <h3 class="pancel-s-title">导航{{index + 1}}</h3>
                </div>
              <div class="drag-box">                
                <div class="border-box btns-form flex v-align-c">
                  <img class="width-12 height-10 mar-r-20 mar-l--5" :src="iconDrag" alt="">
                  <div class="pad-t-5 pad-b-7 flex-item">
                    <el-form-item label="图标" label-width="42px" class="none-mar-b pad-b-10 uploads-bar cursor-p">
                      <div class="mar-r-10 mar-b--5 flex v-align" @click="bottomiconLayerEls(item)">
                        <div class="mar-r-10">
                          <div v-if="item.unselectIcon" class="default-p-pic">
                            <img :src="item.unselectIcon" class="width-60 height-60">
                            <div class="default-p-t">重新选择</div>
                          </div>
                          <div v-else class="default-p-pic">
                            <div class="default-p-img width-60 height-60"></div>
                            <div class="default-p-t">选择图片</div>
                          </div>
                        </div>
                        <div>
                          <div v-if="item.selectIcon" class="default-p-pic">
                            <img :src="item.selectIcon" class="width-60 height-60">
                            <div class="default-p-t">重新选择</div>
                          </div>
                          <div v-else class="default-p-pic">
                            <div class="default-p-img width-60 height-60"></div>
                            <div class="default-p-t">上传图片</div>
                          </div>
                        </div>                        
                      </div>
                    </el-form-item>
                    <el-form-item label="名称" label-width="42px" class="none-mar-b pad-b-10 mar-t-3">
                      <el-input placeholder="最多5个字" class="mini-s-input" maxlength="5" v-model="item.navName"></el-input>
                    </el-form-item>
                    <el-form-item label="链接" label-width="42px" class="none-mar-b pad-b-10 mar-t--4">
                      <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                        @click="item.linkType == '1005' || item.linkType == '1008' ? '' : linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                    </el-form-item>
                  </div>
                </div>
                <div v-if="item.linkType !== '1005' && item.linkType !== '1008'" class="btn-edit-del selected">
                  <div class="btn-del" @click="remove(item)">删除</div>
                </div>
              </div>
            </div>
          </draggable>
          <div class="add-border-box" v-if="customPage.bottomNavList.length < 5" @click="addBorderBox">
            <span>+</span>
            <span>添加</span>
            <span>{{customPage.bottomNavList.length}}/5</span>
          </div>
        </template>
      </el-form>
    </div>
    <!-- 图标选择弹层 -->
    <el-dialog title="图标选择器" :visible.sync="bottomIconSetVisible" :close-on-press-escape="true" width="850px">
      <component-bottomicon-layer :bottomIconData="bottomIcon" :appType="appType" v-on:selectIcon="setBottomIconsTemp"></component-bottomicon-layer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bottomIconSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setBottomIcon">确定</el-button>
      </div>
    </el-dialog>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <component-bottom-nav-link-layer :link="link" :appType="appType" v-on:selectLink="setLinkTemp"></component-bottom-nav-link-layer>
      <div slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setLink">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import elDragDialog from '@/directive/el-dragDialog'
  import ComponentBottomiconLayer from './../ComponentBottomiconLayer'
  import ComponentBottomNavLinkLayer from './../ComponentBottomNavLinkLayer'
  import { getToken } from '@/utils/auth'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentBottomiconLayer,
      ComponentBottomNavLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      customPage1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    watch: {
      'customPage1.bottomNavList'(list) {
        if (list && list.length > 0) {
          this.customPage.bottomNavList.forEach(e => {
            e.linkType = e.linkType.toString()
            const path = this.iconRelativePath.replace('%', e.iconStyle)
            if (e.selectIcon.indexOf(path) === -1) {
              e.selectIcon = path + e.selectIcon
            }
            if (e.unselectIcon.indexOf(path) === -1) {
              e.unselectIcon = path + e.unselectIcon
            }
          })
        } else {
          this.customPage.bottomNavList = this.appType === 10 ? this.shopDefaultBottomNav : this.wholesaleDefaultBottomNav
        }
      }
    },
    data() {
      return {
        // 云店默认底部导航
        shopDefaultBottomNav: [
          { unselectIcon: './static/images/bottom-nav-1/home.png', selectIcon: './static/images/bottom-nav-1/home-on.png', linkType: '1005', linkRemark: '基础链接 - 首页', navName: '首页', sortNo: 1, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/category.png', selectIcon: './static/images/bottom-nav-1/category-on.png', linkType: '1006', linkRemark: '基础链接 - 分类', navName: '分类', sortNo: 2, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/cart.png', selectIcon: './static/images/bottom-nav-1/cart-on.png', linkType: '1007', linkRemark: '基础链接 - 购物车', navName: '购物车', sortNo: 3, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/personal.png', selectIcon: './static/images/bottom-nav-1/personal-on.png', linkType: '1008', linkRemark: '基础链接 - 个人中心', navName: '我的', sortNo: 4, iconStyle: 1 }
        ],
        // 批发默认底部导航
        wholesaleDefaultBottomNav: [
          { unselectIcon: './static/images/bottom-nav-1/home.png', selectIcon: './static/images/bottom-nav-1/home-on.png', linkType: '1005', linkRemark: '基础链接 - 首页', navName: '首页', sortNo: 1, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/category.png', selectIcon: './static/images/bottom-nav-1/category-on.png', linkType: '1006', linkRemark: '基础链接 - 分类', navName: '分类', sortNo: 2, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/cart.png', selectIcon: './static/images/bottom-nav-1/cart-on.png', linkType: '1007', linkRemark: '基础链接 - 进货单', navName: '进货单', sortNo: 3, iconStyle: 1 },
          { unselectIcon: './static/images/bottom-nav-1/personal.png', selectIcon: './static/images/bottom-nav-1/personal-on.png', linkType: '1008', linkRemark: '基础链接 - 个人中心', navName: '我的', sortNo: 4, iconStyle: 1 }
        ],
        customPage: {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          style: {},
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF',
          bottomNavList: []
        },
        // 图标选择器基础数据开始
        bottomIconSetVisible: false,
        bottomIcon: {},
        bottomIconTemp: {},
        // 图标选择器基础数据结束
        // 定义链接选择器基础数据开始
        linkSetVisible: false,
        link: {},
        linkTemp: {},
        // 定义链接选择器基础数据结束
        // icon相对路径
        iconRelativePath: '',
        iconDrag
      }
    },
    computed: {
      bottomIconParams() {
        return this.$utils.deepClone(this.bottomIcon)
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.customPage = this.customPage1
      this.iconRelativePath = './static/images/bottom-nav-%/'
      this.$set(this.customPage, 'iconUrl', this.customPage.iconUrl ? this.customPage.iconUrl : '')
      this.token = { accessToken: getToken() }
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.customPage.bottomNavList
        for (let i = 0; i < filters.length; i++) {
          filters[i].sortNo = i + 1
        }
        this.customPage.bottomNavList = filters
      },
      bottomiconLayerEls(item) {
        this.bottomIcon = item
        this.$bus.$emit('navItem', this.bottomIcon)
        this.bottomIconSetVisible = true
      },
      setBottomIconsTemp(obj) {
        Object.assign(this.bottomIconTemp, obj)
      },
      setBottomIcon() {
        this.bottomIcon.iconStyle = this.bottomIconTemp.iconStyle
        this.bottomIcon.selectIcon = this.bottomIconTemp.selectIcon
        this.bottomIcon.unselectIcon = this.bottomIconTemp.unselectIcon
        this.bottomIconSetVisible = false
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.linkTemp, item)
        this.setLink()
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      addBorderBox() {
        if (this.customPage.bottomNavList.length < 5) {
          this.customPage.bottomNavList.push({
            iconStyle: 1,
            unselectIcon: './static/images/bottom-nav-1/home.png',
            selectIcon: './static/images/bottom-nav-1/home-on.png',
            navName: '导航',
            sortNo: this.customPage.bottomNavList.length + 1
          })
          this.$nextTick(() => {
            const container = this.$el.querySelector('.goods-form')
            container.scrollTop = container.scrollHeight
          })
        }
      },
      resetDetails() {
        this.customPage = {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF',
          bottomNavList: []
        }
      },
      remove(item) {
        if (this.customPage.bottomNavList.length < 3) return this.$message.error('导航数不能少于2个')
        const index = this.customPage.bottomNavList.findIndex(btn => btn.navName === item.navName)
        this.customPage.bottomNavList.splice(index, 1)
        const filters = this.customPage.bottomNavList
        for (let i = 0; i < filters.length; i++) {
          filters[i].sortNo = i + 1
        }
        this.customPage.bottomNavList = filters
      }
    }
  }
</script>

<style lang="less" scoped>
.tips-row {
  font-size: 12px;
  padding: 6px 12px;
  background-color: rgba(236, 245, 255, 1);
}
.drag-box {
  position: relative;
  .border-box{
    margin-bottom: 15px;
  }
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
    background-size: 16px 16px;
  }
}
</style>
